<template>
  <div class="jsbos-common-layout">
    <div class="jsbos-common-layout-center">
      <div class="jsbos_search">
        <el-form
          @submit.native.prevent
          ref="query"
          label-position="right"
          label-width="90px"
          :model="query"
          size="small"
        >
          <el-form-item label="标题" prop="title">
            <el-input
              style="width: 100%"
              v-model="query.title"
              placeholder="标题"
              clearable
              @keyup.enter.native="search()"
            />
          </el-form-item>
          <el-form-item label="文章分类" prop="creatorUserId">
            <el-cascader
              style="width: 100%"
              :options="columnOptions"
              v-model="query.articleType"
              :props="{ label: 'columnName', value: 'id' }"
              clearable
            ></el-cascader>
          </el-form-item>
          <el-form-item label="是否置顶">
            <el-select
              style="width: 100%"
              v-model="query.whetherTop"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) in whetherTopOptions"
                :key="index"
                :label="item.fullName"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否最热">
            <el-select
              style="width: 100%"
              v-model="query.whetherHot"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) in whetherHotOptions"
                :key="index"
                :label="item.fullName"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否最新">
            <el-select
              style="width: 100%"
              v-model="query.whetherNew"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) in whetherNewOptions"
                :key="index"
                :label="item.fullName"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="指定范围">
            <el-select
              style="width: 100%"
              v-model="query.range"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) in rangeOptions"
                :key="index"
                :label="item.fullName"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否发布">
            <el-select
              style="width: 100%"
              v-model="query.whetherOnline"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) in whetherOnlineOptions"
                :key="index"
                :label="item.fullName"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="允许点赞">
            <el-select
              style="width: 100%"
              v-model="query.whetherThumbsUp"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) in whetherThumbsUpOptions"
                :key="index"
                :label="item.fullName"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label-width="0px"
            style="text-align: right; margin-left: 0px"
          >
            <el-button type="primary" icon="el-icon-search" @click="search()">
              {{ $t("common.search") }}</el-button
            >
            <el-button icon="el-icon-refresh-right" @click="reset()"
              >{{ $t("common.reset") }}
            </el-button>
            <el-button
              class="open_search"
              type="text"
              icon="el-icon-arrow-down"
              @click="jsbos.openAndClose('open')"
              v-if="!showAll"
            >
              <span>展开</span>
            </el-button>
            <el-button
              class="close_search"
              type="text"
              icon="el-icon-arrow-up"
              @click="jsbos.openAndClose('close')"
              v-if="!showAll"
            >
              <span>收起</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="jsbos-common-layout-main jsbos-flex-main">
        <div class="jsbos-common-head">
          <div>
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="addOrUpdateHandle()"
              >新增
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-menu caidan"
              @click="columnManager()"
              >栏目管理
            </el-button>
          </div>
          <div class="jsbos-common-head-right">
            <el-tooltip effect="dark" content="刷新" placement="top">
              <el-link
                icon="icon-ym icon-ym-Refresh JSBOS-common-head-icon"
                :underline="false"
                @click="reset()"
              />
            </el-tooltip>
            <screen-full isContainer />
            <el-tooltip effect="dark" content="列设置" placement="top">
              <el-link
                icon="icon-ym icon-ym-options jsbos-common-head-icon"
                :underline="false"
                @click="() => this.$refs.jsbosTableRef.showDrawer()"
              />
            </el-tooltip>
          </div>
        </div>
        <jsbos-table
          border="true"
          v-loading="listLoading"
          :data="list"
          ref="jsbosTableRef"
          @sort-change="sortChange(1, asc, orderNum)"
        >
          <el-table-column
            prop="title"
            label="文章标题"
            width="200"
            align="left"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <keep-alive>
                <el-link
                  :underline="false"
                  @click="goDetail(scope.row.id)"
                  type="primary"
                  >{{ scope.row.title }}</el-link
                >
              </keep-alive>
            </template>
          </el-table-column>
          <el-table-column label="文章分类" width="0" prop="articleTypeName">
          </el-table-column>
          <el-table-column
            label="状态"
            width="100"
            prop="weatherOnline"
            algin="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.whetherOnline == '1'" class="online" />
              <span v-else class="offline" />
              &nbsp;
              <span v-if="scope.row.whetherOnline == '1'"> 已发布 </span>
              <span v-else> 待发布 </span>
            </template>
          </el-table-column>
          <el-table-column
            label="置顶"
            width="0"
            prop="whetherTop"
            algin="center"
          >
            <template slot-scope="scope">
              {{ scope.row.whetherTop | dynamicText(whetherTopOptions) }}
            </template>
          </el-table-column>
          <el-table-column
            label="最热"
            width="0"
            prop="whetherHot"
            algin="center"
          >
            <template slot-scope="scope">
              {{ scope.row.whetherHot | dynamicText(whetherHotOptions) }}
            </template>
          </el-table-column>
          <el-table-column
            label="最新"
            width="0"
            prop="whetherNew"
            algin="center"
          >
            <template slot-scope="scope">
              {{ scope.row.whetherNew | dynamicText(whetherNewOptions) }}
            </template>
          </el-table-column>
          <el-table-column
            label="点赞"
            width="0"
            prop="thumbsUp"
            algin="center"
          >
            <template slot-scope="scope">
              {{
                scope.row.whetherThumbsUp | dynamicText(whetherThumbsUpOptions)
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="点赞数"
            width="0"
            prop="thumbsUpNumber"
            algin="center"
          >
            <template slot-scope="scope">
              {{ scope.row.thumbsUpNumber || 0 }}
            </template>
          </el-table-column>
          <el-table-column
            label="浏览量"
            width="0"
            prop="viewNumber"
            algin="center"
          >
            <template slot-scope="scope">
              {{ scope.row.viewNumber || 0 }}
            </template>
          </el-table-column>
          <el-table-column
            label="可见范围"
            width="0"
            prop="rangeIds"
            algin="center"
          >
            <template slot-scope="scope">
              {{ scope.row.rangeIds | dynamicText(rangeOptions) }}
            </template>
          </el-table-column>
          <el-table-column prop="orderNum" label="排序" width="0" />
          <el-table-column
            label="发布时间"
            width="150"
            prop="onlineTime"
            algin="center"
          >
          </el-table-column>
          <el-table-column
            label="创建人"
            width="0"
            prop="creatorUserName"
            algin="center"
          >
          </el-table-column>
          <el-table-column
            label="创建时间"
            width="150"
            prop="creatorTime"
            algin="center"
          >
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="text" @click="goDetail(scope.row.id)"
                >详情
              </el-button>
              <el-tooltip
                v-if="scope.row.whetherOnline == '1'"
                class="item"
                effect="dark"
                content="请取消发布之后，再重新编辑"
                placement="left"
              >
                <el-button
                  disabled
                  type="text"
                  @click="addOrUpdateHandle(scope.row.id)"
                  >编辑
                </el-button>
              </el-tooltip>
              <el-button
                v-else
                type="text"
                @click="addOrUpdateHandle(scope.row.id)"
                >编辑
              </el-button>
              <el-button
                v-if="scope.row.whetherOnline == '1'"
                type="text"
                @click="handleOffline(scope.row.id)"
                >取消发布
              </el-button>
              <el-tooltip
                v-if="scope.row.whetherOnline == '1'"
                class="item"
                effect="dark"
                content="请取消发布之后，再重新删除"
                placement="left"
              >
                <el-button
                  type="text"
                  disabled
                  class="jsbos-table-delBtn"
                  @click="handleDel(scope.row.id)"
                  >删除
                </el-button>
              </el-tooltip>
              <el-button
                v-else
                type="text"
                class="jsbos-table-delBtn"
                @click="handleDel(scope.row.id)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </jsbos-table>
        <pagination
          :total="total"
          :page.sync="listQuery.currentPage"
          :limit.sync="listQuery.pageSize"
          @pagination="initData"
        />
      </div>
    </div>
    <el-drawer
      title="栏目目录"
      :visible.sync="drawer"
      :with-header="true"
      size="30%"
    >
      <!-- 自定义标题 -->
      <template slot="title">
        <div class="custom-title" style="font-size: 16px">栏目目录</div>
      </template>
      <div class="butt_position">
        <el-button
          size="mini"
          class="but_color"
          icon="el-icon-plus"
          @click="handleAdd()"
          >新增栏目</el-button
        >
        <el-table
          v-loading="columnLoading"
          :data="columnListData"
          row-key="id"
          :default-expand-all="isExpandAll"
          :show-header="true"
          :tree-props="{ children: 'children', hasChildren: true }"
        >
          <el-table-column prop="columnName" label="栏目名称"></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="ym-custom ym-custom-dots-vertical"></i>
                </span>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-edit"
                      @click="handleUpdate(scope.row)"
                      >修改</el-button
                    >
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click="handleDelete(scope.row)"
                      >删除</el-button
                    >
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
    <!-- 添加或修改栏目对话框 -->
    <el-dialog
      :title="columnTitle"
      :visible.sync="openColumn"
      width="400px"
      append-to-body
    >
      <el-form
        :rules="rules"
        ref="columnForm"
        :model="columnForm"
        label-width="80px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级栏目" prop="parentId">
              <el-cascader
                style="width: 200px"
                :options="columnOptions"
                v-model="columnForm.parentId"
                :props="{
                  checkStrictly: true,
                  label: 'columnName',
                  value: 'id',
                }"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="栏目名称" prop="columnName" required>
              <el-input
                style="width: 200px"
                v-model="columnForm.columnName"
                placeholder="请输入栏目名称"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <JSBOS-Form v-if="formVisible" ref="JSBOSForm" @refresh="refresh" />
    <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
    <Detail
      v-if="detailVisible"
      ref="Detail"
      @refresh="detailVisible = false"
    />
  </div>
</template>

<script>
import request from "@/utils/request";
import JSBOSForm from "./Form";
import ExportBox from "./ExportBox";
import Detail from "./Detail";

export default {
  name: "CmsContent",
  components: { JSBOSForm, ExportBox, Detail },
  data() {
    return {
      columnLoading: false,
      isExpandAll: true,
      columnTitle: "",
      columnOptions: [],
      columnForm: {
        parentId: undefined,
        columnName: undefined,
      },
      openColumn: false,
      columnListData: [],
      drawer: false,
      showAll: false,
      detailVisible: false,
      query: {
        coverUrl: undefined,
        title: undefined,
        abstract: undefined,
        articleType: undefined,
        orderNum: undefined,
        range: undefined,
        whetherOnline: undefined,
        whetherTop: undefined,
        whetherHot: undefined,
        whetherNew: undefined,
        whetherThumbsUp: undefined,
      },
      treeProps: {
        children: "children",
        label: "fullName",
        value: "id",
      },
      list: [],
      listLoading: true,
      loading: false,
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "",
        sidx: "",
      },
      formVisible: false,
      exportBoxVisible: false,
      columnList: [
        { prop: "coverUrl", label: "封面图" },
        { prop: "title", label: "文章标题" },
        { prop: "abstract", label: "文章摘要" },
        { prop: "articleType", label: "文章分类" },
        { prop: "orderNum", label: "排序" },
        { prop: "range", label: "指定范围" },
        { prop: "whetherOnline", label: "是否发布" },
        { prop: "whetherTop", label: "是否置顶" },
        { prop: "whetherHot", label: "是否最热" },
        { prop: "whetherNew", label: "是否最新" },
        { prop: "whetherThumbsUp", label: "是否允许点赞" },
      ],
      articleTypeOptions: [
        { fullName: "选项一", id: "1" },
        { fullName: "选项二", id: "2" },
      ],
      articleTypeProps: {
        label: "fullName",
        value: "id",
      },
      rangeOptions: [
        { fullName: "全公司", id: "1" },
        { fullName: "仅创建人", id: "2" },
        { fullName: "指定人员", id: "3" },
      ],
      rangeProps: {
        label: "fullName",
        value: "id",
      },
      whetherOnlineOptions: [
        { fullName: "待发布", id: "0" || "2" },
        { fullName: "已发布", id: "1" },
      ],
      whetherOnlineProps: {
        label: "fullName",
        value: "id",
      },
      whetherTopOptions: [
        { fullName: "是", id: "1" },
        { fullName: "否", id: "2" },
      ],
      whetherTopProps: {
        label: "fullName",
        value: "id",
      },
      whetherHotOptions: [
        { fullName: "是", id: "1" },
        { fullName: "否", id: "2" },
      ],
      whetherHotProps: {
        label: "fullName",
        value: "id",
      },
      whetherNewOptions: [
        { fullName: "是", id: "1" },
        { fullName: "否", id: "2" },
      ],
      whetherNewProps: {
        label: "fullName",
        value: "id",
      },
      whetherThumbsUpOptions: [
        { fullName: "是", id: "1" },
        { fullName: "否", id: "2" },
      ],
      whetherThumbsUpProps: {
        label: "fullName",
        value: "id",
      },
      rules: {
        columnName: [
          {
            required: true,
            message: "请输入栏目名称",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {
    menuId() {
      return this.$route.meta.modelId || "";
    },
  },
  created() {
    this.initData();
  },
  methods: {
    handleDelete(row) {
      var id = row.id;
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          request({
            url: `/api/cms/CmsColumn/${id}`,
            method: "DELETE",
          }).then((res) => {
            this.columnLoading = true;
            this.$message({
              type: "success",
              message: res.msg,
              duration: 1000,
              onClose: () => {
                this.getColumnList();
                this.columnLoading = false;
              },
            });
          });
        })
        .catch(() => {});
    },
    //下架
    handleOffline(id) {
      var data = {
        id: id,
        whetherOnline: "0",
      };
      this.$confirm("此操作将取消发布该文章, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          request({
            url: "/api/cms/CmsContent/" + id,
            method: "PUT",
            data: data,
          })
            .then((res) => {
              this.$message({
                type: "success",
                message: res.msg,
                onClose: () => {
                  this.initData();
                },
              });
            })
            .catch(() => {
              this.columnLoading = false;
            });
        })
        .catch(() => {});
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      const id = row.id;
      request({
        url: "/api/cms/CmsColumn/" + id,
        method: "get",
      }).then((res) => {
        this.columnForm = res.data;
        this.columnTitle = "修改栏目";
        this.openColumn = true;
      });
    },

    // 表单提交
    submitForm() {
      this.$refs["columnForm"].validate((valid) => {
        if (valid) {
          this.columnRequest();
        }
      });
    },
    columnRequest() {
      if (this.columnForm.parentId == null) {
        this.columnForm.parentId = "0";
      } else {
        this.columnForm.parentId =
          this.columnForm.parentId[this.columnForm.parentId.length - 1];
      }
      if (!this.columnForm.id) {
        request({
          url: "/api/cms/CmsColumn",
          method: "post",
          data: this.columnForm,
        })
          .then((res) => {
            this.openColumn = false;
            this.columnLoading = true;
            this.$message({
              message: res.msg,
              type: "success",
              onClose: () => {
                this.getColumnList();
                this.columnForm = {};
                this.columnLoading = false;
              },
            });
          })
          .catch(() => {
            this.columnLoading = false;
          });
      } else {
        request({
          url: "/api/cms/CmsColumn/" + this.columnForm.id,
          method: "PUT",
          data: this.columnForm,
        })
          .then((res) => {
            this.openColumn = false;
            this.columnLoading = true;
            this.$message({
              message: res.msg,
              type: "success",
              onClose: () => {
                this.getColumnList();
                this.columnForm = {};
                this.columnLoading = false;
              },
            });
          })
          .catch(() => {
            this.columnLoading = false;
          });
      }
    },

    //取消新增栏目
    cancel() {
      this.openColumn = false;
    },
    //栏目管理
    columnManager() {
      this.drawer = true;
      this.getColumnList();
    },
    /** 查询栏目树结构 */
    getColumnOptions() {
      let _query = {};
      request({
        url: `/api/cms/CmsColumn/getList`,
        method: "post",
        data: _query,
      })
        .then((res) => {
          var _list = [];
          for (let i = 0; i < res.data.list.length; i++) {
            let _data = res.data.list[i];
            _list.push(_data);
          }
          this.columnOptions = this.handleTree(_list);
        })
        .catch(() => {});
    },
    //构造树型结构数据
    // @param {*} data 数据源
    // @param {*} id id字段 默认 'id'
    // @param {*} parentId 父节点字段 默认 'parentId'
    // @param {*} children 孩子节点字段 默认 'children'

    handleTree(data, id, parentId, children) {
      let config = {
        id: id || "id",
        parentId: parentId || "parentId",
        childrenList: children || "children",
      };

      var childrenListMap = {};
      var nodeIds = {};
      var tree = [];
      for (let d of data) {
        let parentId = d[config.parentId];
        if (childrenListMap[parentId] == null) {
          childrenListMap[parentId] = [];
        }
        nodeIds[d[config.id]] = d;
        childrenListMap[parentId].push(d);
      }

      for (let d of data) {
        let parentId = d[config.parentId];
        if (nodeIds[parentId] == null) {
          tree.push(d);
        }
      }

      for (let t of tree) {
        adaptToChildrenList(t);
      }

      function adaptToChildrenList(o) {
        if (childrenListMap[o[config.id]] !== null) {
          o[config.childrenList] = childrenListMap[o[config.id]];
        }
        if (o[config.childrenList]) {
          for (let c of o[config.childrenList]) {
            adaptToChildrenList(c);
          }
        }
      }
      return tree;
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.openColumn = true;
      this.columnTitle = "新增栏目";
      let _query = {};
      request({
        url: `/api/cms/CmsColumn/getList`,
        method: "post",
        data: _query,
      })
        .then((res) => {
          var _list = [];
          for (let i = 0; i < res.data.list.length; i++) {
            let _data = res.data.list[i];
            _list.push(_data);
          }
          this.columnOptions = this.handleTree(_list);
          this.columnTitle = "新增栏目";
        })
        .catch(() => {
          this.openColumn = false;
        });
    },

    getColumnList() {
      this.columnLoading = true;
      let _query = {};
      request({
        url: `/api/cms/CmsColumn/getList`,
        method: "post",
        data: _query,
      }).then((res) => {
        var _list = [];
        for (let i = 0; i < res.data.list.length; i++) {
          let _data = res.data.list[i];
          _list.push(_data);
        }
        this.columnListData = this.handleTree(_list);
        this.columnLoading = false;
      });
    },
    goDetail(id) {
      this.detailVisible = true;
      this.$nextTick(() => {
        this.$refs.Detail.init(id);
      });
    },
    sortChange({ column, prop, order }) {
      this.listQuery.sort = order == "ascending" ? "asc" : "desc";
      this.listQuery.sidx = !order ? "" : prop;
      this.initData();
    },
    initData() {
      this.getColumnOptions();
      if (
        this.query.articleType != null &&
        this.query.articleType.length != null
      ) {
        this.query.articleType =
          this.query.articleType[this.query.articleType.length - 1];
      }
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        menuId: this.menuId,
      };
      request({
        url: `/api/cms/CmsContent/getList`,
        method: "post",
        data: _query,
      }).then((res) => {
        var _list = [];
        for (let i = 0; i < res.data.list.length; i++) {
          let _data = res.data.list[i];
          _list.push(_data);
        }
        this.list = _list;
        this.total = res.data.pagination.total;
        this.listLoading = false;
      });
    },
    handleDel(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          request({
            url: `/api/cms/CmsContent/${id}`,
            method: "DELETE",
          }).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
              onClose: () => {
                this.initData();
              },
            });
          });
        })
        .catch(() => {});
    },
    addOrUpdateHandle(id, isDetail) {
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.JSBOSForm.init(id, isDetail);
      });
    },
    exportData() {
      this.exportBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.ExportBox.init(this.columnList);
      });
    },
    download(data) {
      let query = {
        ...data,
        ...this.listQuery,
        ...this.query,
        menuId: this.menuId,
      };
      request({
        url: `/api/cms/CmsContent/Actions/Export`,
        method: "GET",
        data: query,
      }).then((res) => {
        if (!res.data.url) return;
        this.jsbos.downloadFile(res.data.url);
        this.$refs.ExportBox.visible = false;
        this.exportBoxVisible = false;
      });
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "",
        sidx: "",
      };
      this.initData();
    },
    refresh(isrRefresh) {
      this.formVisible = false;
      if (isrRefresh) this.reset();
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.search();
    },
  },
};
</script>
<style scoped lang="scss">
.butt_position {
  margin: 0px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.but_color {
  margin-bottom: 20px;
  // border: 1px solid black;
}

.online {
  width: 10px;
  height: 10px;
  display: inline-table;
  border-radius: 50%;
  background: var(--green);
  color: var(--green);
}

.offline {
  width: 10px;
  height: 10px;
  display: inline-table;
  border-radius: 50%;
  background: var(--orange);
  color: var(--orange);
}
</style>
